<!DOCTYPE html>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/view/common/common.jsp" %>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <p style="text-align: center;font-size: 20px;">${typeName}</p>
        <div class="page">
            <C:forEach items="${goodss}" var="goods">
                <div class="goods-box">
                    <a href="<c:url value='/dmz/pmall/detail.html?id='/>${goods.id}"><img src="${goods.imgFile}" alt=""></a>
                    <div class="info-box">
                        <div class="goods-name">
                                ${goods.name}
                        </div>
                        <div class="goods-info">
                                规格：${goods.spec}
                        </div>
                        <div class="goods-price">
                                ￥${goods.price}
                        </div>
                    </div>
                </div>
            </C:forEach>
        </div>
        <style type="text/css" media="screen">
        body {
            background: #F8F8F8;
        }
            .page {
                width: 92%;
                height: 100%;
                padding: 20px 4%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
            }    
            img {
                width:100%;
                height:280px;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
            }
            .goods-box {
                width: 48%;
                height: 450px;
                border-radius: 20px;
                box-shadow:0px 0px 6px #A7A7A7;
                margin-bottom: 20px;
                background: #fff;
            }
            .info-box {
                width: 92%;
                padding: 0 4%;
            }
            .goods-name {
                font-size: 28px;
                color: #666666;
                text-align: left;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .goods-info {
                font-size: 28px;
                color: #999999;
                text-align: left;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                margin-top: 4px;
            }
            .goods-price {
                font-size: 38px;
                color: #FB4545;
                text-align: right;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                margin-top: 20px;
            }
        </style>
    </body>
</html>